<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col>
          <el-card shadow="never">
            <div>
              <el-row>
                <el-col>
                  <el-card shadow="never">
                    <h2 align="center">稳定性测试报告</h2>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col>
                  <el-card shadow="never">
                    <table class="pure-table pure-table-bordered" width="100%" border="1" cellspacing="1">
                      <tbody>
                      <tr>
                        <td class="left" width="20%">产品名称</td>
                        <td width="100%">{{ productName }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">设备名称</td>
                        <td width="50%">{{ deviceName }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">设备ID</td>
                        <td width="50%">{{ deviceId }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">应用包名</td>
                        <td width="50%">{{ apkPackageName }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">应用版本</td>
                        <td width="80%">{{ appVersion }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">遍历时长(分钟)</td>
                        <td width="50%">{{ runningMinute }}</td>
                      </tr>
                      <tr>
                        <td class="left" width="20%">Crash数量</td>
                        <td width="50%">{{ crashCount }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-card shadow="always" id="card2" style="height: auto" v-show="isShow">
                <el-collapse v-model="activeNames">
                  <el-collapse-item title="Coverage" name="1">
                    <div>
                      <li>
                        {{ tableData.Coverage }}
                      </li>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="ActivityTimes" name="2">
                    <li v-for="(value, key) in aTimes">
                      {{ key }} : {{ value }}
                    </li>
                  </el-collapse-item>
                  <el-collapse-item title="TestedActivity" name="3">
                    <li v-for="value in tableData.TestedActivity">
                      {{ value }}
                    </li>
                  </el-collapse-item>
                  <el-collapse-item title="TotalActivity" name="4">
                    <li v-for="value in tableData.TotalActivity">
                      {{ value }}
                    </li>
                  </el-collapse-item>
                </el-collapse>
              </el-card>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      tableData: {},
      activeNames: ['1', '2', '3'],
      sLog: {},
      aTimes: {},
      productName: '',
      appVersion: '',
      apkPackageName: '',
      crashCount: '',
      deviceName: '',
      deviceId: '',
      runningMinute: ''
    }
  },
  created() {
    this.getReportLog()
  },
  methods: {
    getReportLog() {
      const id = this.$route.params.id
      this.get(`/api/fastbot/getReportLog?id=${id}`, '', resp => {
        this.productName = resp.result.productName
        this.appVersion = resp.result.appVersion
        this.apkPackageName = resp.result.apkPackageName
        this.crashCount = resp.result.crashCount
        this.deviceName = resp.result.deviceName
        this.deviceId = resp.result.deviceId
        this.runningMinute = resp.result.runningMinute
        if (resp.result.statisticsLog.indexOf("%") !== -1 || resp.result.statisticsLog === '') {
          console.log(resp.result.statisticsLog)
          this.isShow = false
        } else {
          this.isShow = true
          this.tableData = JSON.parse(resp.result.statisticsLog)
          this.aTimes = this.tableData.ActivityTimes[0]
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

.pure-table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
}

.pure-table caption {
  color: #000;
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;
}

.pure-table td, .pure-table th {
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: .5em 1em;
}

.pure-table thead {
  background-color: #ffffff;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}

.pure-table td {
  background-color: transparent;
}

.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
